<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue-core</title>
  <style>
    *{
        margin: 0;
        padding: 0;
    }
    .list{
        background-color: aqua;
    }
    .list li {
        border: 1px solid #eee;
        list-style: none;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="module">
    import {Component, Lve} from './index.js'
    const IndexComponent = new Component({
        data: () => {
            return {
                article: {
                    title: '前标题',
                    text: {
                        word: '文字'
                    }
                },
                author: '前林大大哟',
                arr: [{
                    id: 0,
                    name: '林大大'
                },{
                    id: 1,
                    name: '林小小'
                },{
                    id: 2,
                    name: '林大哟哟'
                }]
            };
        },
        watch: {
            author(value) {
                console.log("watch 监听author:", value);
            },
            article(value){
                console.log("watch 监听 article.title:", value);
            }
        },
        methods: {
            onButtonClick() {
                this.article.title = "标题"
                this.author = '林大大哟'
                this.arr.push({
                    id: 3,
                    name: '林林小鹏'
                })
            },
            itemClick(item, type) {
                console.log(item, type);
            }
        },
        template:
            `
                <div>
                    <div>{{article.title}}: {{author}}</div>
                    <div>{{article.text.word}}</div>
                    <div><input type="text" :model="article.title"></div>
                    <div><input type="text" :model="author"></div>
                    <div><button @click="onButtonClick">click</button></div>
                    {{article.title}}
                    <ul class="list">
                        <li class="item" :for="item in arr" :key="item.id" @click="itemClick(item, '123')">{{item.name}}</li>
                    </ul>
                </div>
            `
    });
    
    new Lve({
        mount: '#root', 
        component: IndexComponent
    })
  </script>
</body>
</html>